This app plugin for DecSoft App Builder want to offer some additional and useful controls. Take a look below at the controls that this app plugins offers.
The SelectEx control is similar than the "out of the box" Select control: allows to show to the user a list of text items, so the user can choose one of them. The addition of this SelectEx control is that you can not only specify a text for the list items, but, also any other stuff, so, when the user select a specific text / item, you get access to these other stuff, in addition to the item's text.
Describe here all the properties and events of this controls is not very useful, since most of the properties and events are exactly the same than the "out of the box" included Select control. We want, however, to refer here the "items" and the "value" properties. These properties are also available in the Select control, but, their values are not exactly the same.
As mentioned above, the Items property of the SelectEx control, is not just a list of string items, like in the "out of the box" Select control. The "Items" property of the SelectEx control is an array of objects, that you can edit from the Javascript code editor in the IDE, and, even translate it using the IDE App languages manager. Take a look at the default value of the Items property of the SelectEx control:
As you can see the property is an array of objects, with the only mandatory "text" property. The content of the "text" property is what is added into the SelectEx control, so the user can choose, in the above case, one of the "Item 1" or "Item 2" items. In the "Change" event of the control, the "Value" property become the selected object, not only the "text" property, but the entire object.
Now supose the below value for the "Items" property of the SelectEx control:
Now the objects that we provide have another (completely arbitrary) "payload" property. You can add any number of properties to the objects, and then, when the user select a item in the list, the "Value" property of the SelectEx control become, for example, the below one:
So with the "Value" property you know the text that the user select, but, also have available the entire object, with the "payload" property too, in this case. And that's the point of the SelectEx: instead of just a text, you get an entire JavaScript object with the properties that you need, when the user select a specific item in the list.
The Typeahead is similar than a Text input control, but offer to the user the ability to choose the possible value, from a list of values / items, which are shown to the user when match the text that he type in the control.
Since the Typeahead controls is similar to the Text input control, included and documented in DecSoft App Builder "out of the box", we don't refer here all the control properties and events, however, we must refer some specific properties and events of the Typeahead control.
The Typeahead Items property stores an array of objects. These objects must mandatory have a "text" key, which is the text to show to the user when he type in the control. For example, a "text" key can be "Sample text", so, when the user type "Samp", the control show a list, with, at least one item: "Sample text", which the user can choose.
There is another, optional, "subtext" key, that you can add into the objects of the Items property. If the "subtext" key exists, the control show that "subtext" below the "text", in the suggestions list which is show to the user.
You can add additionals keys to the Items property objects. The control don't use these optional keys, however, you can use it later, when the user choose one of the suggestions list items: at this time the Typeahead Item property is filled with the object which correspond with the "text" choosed by the user.
The Typeahead Item property is "null" by default. When the user choose an item from the suggestions list, the Item property is filled with the corresponding object. Remember that the Typeahead Items property is an array of objects. Well, when the user choose an item from the suggestions lists, the Item property is filled with the appropriate object from that "Items" array.
The Typeahead Value is a "string" property which stores the text which is in the control, because has been typed by the user, or because is the "text" that has been inserted automatically by the control, after the user choose an item from the suggestions list. You can also set this property to change what is show to the user in the control.
Note that this property may don't match one of the "text" items in the suggestions list. If you want to know if the user choose an item from the suggestions list, you must check the Typeahead Item property. However, note that, after the user choose an item from the list, the "Value" property become the "text" property of the selected item / object.
The Typeahead Autocomplete boolean property determines if the "text" of the selected item / object, is inserted automatically after the user choose that item / object from the suggestions list. This property is "true" by default, but you can set to "false", and use the Typeahead ItemClick event to set the Typeahead Value property like you wanted, or just do another thing.
The Typeahead Highlight boolean property determines if the matched texts in the suggestions list, must be show strong, highlight, so the user can see that that text are inside in one or more of the available suggestions list items. This property is "true" by default. Set to "false" to deactivate this characteristic.
The Typeahead EmptyText property stores the text which is show to the user when no items are found in the suggestions list of items. You can set this property to an empty string, so no text is show to the user when no matches are found.
The Typeahead EmptyKind property determine the background of the Typeahead EmptyText property. By default is "danger". You can use one of the provided "app.kind.*" constant values to set this property.
The Typeahead ItemClick event is fired when the user choose one of the suggestions list of items. Inside this event you can check the Typeahead Item property, which contains the selected item / object choosed by the user.
The LabelInput control is similar to the other input controls included "out of the box" by DecSoft App Builder like the Text, Number, Color, Date and other input controls. Which the LabelInput offers is another style, basically incorporating a Label property which is placed inside the input control, and, is show in one or another manner depending if the input control has a value or not.
Describe here all the properties and events of this controls is not very useful, since most of the properties and events are exactly the same than the "out of the box" included input controls. We want, however, to refer here the "label" and the "type" properties of the control.
The Label property of the LabelInput control is the piece of plain text which appear inside the input control. This can be a descriptive text of what is expected in the input control, for example, "Type here your name" or "Your EMail address". The Label of the input appear like a "placeholder" if the input has no value, and, appear floating up to the value in other case.
The Type property of the LabelInput control allow us to determine what input control is expected to store. By default the type of the LabelInput is "text" and can be one of these values: text, email, number, password, color, date, time and search. This property also determines the interface that the browser provide to the control, for example, a "date" type implied that the browser show to the user a calendar dialog in order to choose a date value in a visual way.
The LabelText control is similar to Textarea control included "out of the box" by DecSoft App Builder. Which the LabelText offers is another style, basically incorporating a Label property which is placed inside the Textarea control, and, is show in one or another manner depending if the textarea control has a value or not.
Describe here all the properties and events of this controls is not very useful, since most of the properties and events are exactly the same than the "out of the box" included Textarea control. We want, however, to refer here the "label" property of the control.
The Label property of the LabelText control is the piece of plain text which appear inside the textarea control. This can be a descriptive text of what is expected in the texarea control, for example, "Type here your comments". The Label of the textarea appear like a "placeholder" if the textarea has no value, and, appear floating up to the value in other case.
The LabelSelect control is similar to Select control included "out of the box" by DecSoft App Builder. Which the LabelSelect offers is another style, basically incorporating a Label property which is placed inside the select control, and, is show in one or another manner depending if the select control has a value or not.
Describe here all the properties and events of this controls is not very useful, since most of the properties and events are exactly the same than the "out of the box" included Select control. We want, however, to refer here the "label" property of the control.
The Label property of the LabelSelect control is the piece of plain text which appear inside the select control. This can be a descriptive text of what is expected in the select control, for example, "Choose your country".
The LabelSelectEx control is similar to SelectEx control included by this plugin. Which the LabelSelectEx offers is another style, basically incorporating a Label property which is placed inside the select control, and, is show in one or another manner depending if the select control has a value or not.
Describe here all the properties and events of this controls is not very useful, since most of the properties and events are exactly the same than the "out of the box" included SelectEx control. We want, however, to refer here the "label" property of the control.
The Label property of the LabelSelectEx control is the piece of plain text which appear inside the select control. This can be a descriptive text of what is expected in the select control, for example, "Choose your country".